React - 渲染機制

觸發時機

根據官方文件，可以分為三個步驟：

觸發(triggering)
開始渲染畫面所需元件(rendering)
將渲染畫面提交至 DOM (committing)

觸發

觸發時機可分為初次載入觸發 跟 狀態更新觸發

1.初次載入

會呼叫 creactRoot 來產生根層級的虛擬容器，並且綁定至特定的 DOM 結構上，並返回根容器

const root = reactDOM.create(getElementById("root"));

tip

能用 class 綁定嗎?是可以的，但考量到:

id 相對具有唯一性
若是大型專案架構龐大的情況下，查找 class 會更花時間，較不利性能

等兩個因素，所以通常還是綁定 id

接著透過其內建方法 render 去渲染根頁面內容

const root = reactDOM.create(getElementById("root"));
root.render(<App />);

2.狀態更新渲染

會使用所謂的 set function 去產生狀態，當狀態值發生改變，就會觸發所謂的狀態更新渲染。

React 渲染畫面元件

也同樣可以分為初次及狀態更新兩種

1.初次渲染

React 初次渲染機制是採取遞迴式渲染，會透過不斷遞迴檢視架構是否有更多子、甚至孫的架構，直到確認沒有為止。

假設今天要被渲染的頁面架構如下：

const App = () => {
  return (
    <>
      <h1>title</h1>
      <Component />
    </>
  );
};

而其中 <Component/> 架構

const Component = () => {
  return (
    <>
      <h2>subtitle</h2>
      <ChildComponent />
    </>
  );
};

最初會由父層 App 元件開始依序渲染，當偵測到內部包含其他元件時，會先去渲染元件內容

所以，以這個範例程式碼來說，會不斷遞迴確認是否還有未渲染內容，其中最快被渲染完成的應該是 ChildComponent 內的架構，依序往上層渲染，直到完成內容。

狀態改變重新渲染

react 是使用 Diffing Algorith 去處理重新渲染機制

圖片出處：https://react.dev/learn/render-and-commit

Diffing 演算法

在狀態發生改變並觸發重新渲染時，首先會比對發生變化的 root element，如果 root element 的元素不同（如下），就會直接整株重新渲染：

單一元素渲染

舊的

<div>
  {state}
  <button>click</button>
</div>

新的

<p>
  {state}
  <button>click</button>
</p>

相反的，如果根元素不變，則不會整株更新而是僅更新狀態值的部分。

元件渲染

都是全部完整更新（待補充）

最終我們終於產生一個完整的 Virtual DOM（如下圖）

![[Pasted image 20240130134135.png]]

提交渲染至 DOM

初次渲染

會使用 appendChild() 把 Virtual DOM 上產生的全部內容，從綁定的根節點 root dom 往下渲染（如下圖）

![[Pasted image 20240130140614.png]]

觸發時機​

觸發​

1.初次載入​

2.狀態更新渲染​

React 渲染畫面元件​

1.初次渲染​

狀態改變重新渲染​

Diffing 演算法​

單一元素渲染​

元件渲染​

提交渲染至 DOM​

初次渲染​

參考資料​